$(function () {
    let menu_btn = $('.menu_btn');
    let cateListBox = $('.cateListBox');
    let limit = 35;
    let currentPage = sessionStorage.getItem('currentPage');
    let currentData = (currentPage - 1) * limit;
    let pCounts = 0;
    let classify_song = $('.classify_song');
    let cateListBox_body = $('.cateListBox_body');
    let cateListBox_body_dt = $('.cateListBox_body>dl>dt');
    let classify_title_left_p = $('.classify_title_left>p');
    let order = '';
    let cat = '';
    sessionStorage.setItem('currentPage', currentPage);
    menu_btn.on('click', function () {
        cateListBox.toggleClass('hide');
    })
    $.ajax({
        url: 'http://localhost:3000/playlist/catlist',
        success: function (res) {
            console.log(res.categories);
            console.log(res.sub);
            cateListBox_body.html('');
            cateListBox_body.append(`<h3>
            <a href="javascript:;">
                <span class="allStyle">全部风格</span>
            </a>
        </h3>`)
            let allStyle = $(`.allStyle`);
            allStyle.on('click', function () {
                cateListBox.toggleClass('hide');
                sessionStorage.setItem('cat', '全部');
                currentPage = sessionStorage.setItem('currentPage', 1);
                let pagenum = document.querySelectorAll('.pagenum') 
                songRequest('http://localhost:3000/top/playlist', order, 35, currentData, sessionStorage.getItem('cat'))
                let pagination_prev = $('#pagination-prev');
                let pagination_next = $('#pagination-next');
                $(pagenum).eq(currentPage - 1).toggleClass('pagination-current').siblings().removeClass('pagination-current')
                if (currentPage == 1) {
                    $(pagination_prev).toggleClass('pagination-disabled')
                    $(pagination_next).toggleClass('pagination-disabled')
                }
            })
            let categoriesArr = [];
            for (let key in res.categories) {
                categoriesArr.push(res.categories[key]);
            }
            categoriesArr.forEach((el, index) => {
                cateListBox_body.append(`<dl class="f-nb f-nb${index+1}">
                <dt>
                    <i class="u-icn u-icn-${index+1}"></i>
                    ${el}
                </dt>
                <dd>
                    
                </dd>
            </dl>`)

            })

            // 语种数组
            tArr('languagesArr', 0)
            // 风格数组
            tArr('styleArr', 1)
            // 场景数组
            tArr('sceneArr', 2)
            // 情感数组
            tArr('emotionalArr', 3)
            // 主题数组
            tArr('themeArr', 4);

            function tArr(arrName, category) {
                let f_nb_dd = $(`.f-nb${category+1} dd`);
                arrName = [];
                res.sub.forEach(e => {
                    if (e.category === category) {
                        arrName.push(e);
                    }
                })
                arrName.forEach(ele => {
                    f_nb_dd.append(` <a href="#" class="s-fc1">${ele.name}</a>
                    <span class="cateListBox_line">|</span>`);
                })
            }

        }
    })

    function songRequest(url, order, limit, currentData, cat) {
        $.ajax({
            url: url,
            data: {
                order: order ? order : 'hot',
                limit: limit,
                offset: currentData,
                cat: cat ? cat : '全部',
            },
            success: function (res) {
                console.log(res);
                classify_song.html('')
                sessionStorage.setItem('cat', cat);
                console.log(sessionStorage.getItem('cat'));
                classify_title_left_p.html(`${sessionStorage.getItem('cat')}`)
                res.playlists.forEach((el, index) => {
                    if (el.playCount > 100000) {
                        pCounts = (el.playCount / 10000).toFixed(0) + "万"
                    } else {
                        pCounts = el.playCount
                    }
                    classify_song.append(`<li>
                <div class="songD">
                    <a href="../../views/playlistDetail.html?id=${el.id}">
                        <div class="msk_img"></div>
                        <img src="${el.coverImgUrl}" alt="">
                    </a>
                    <div class="songD_bottom">
                        <div class="songD_bottom_con">
                            <div class="songD_bottom_con_ep pull-left">
                                <div class="songD_bottom_con_ep_icon pull-left"></div>
                                <p class="nb pull-left">${pCounts}</p>
                            </div>
                            <div class="songD_bottom_con_play pull-right">
                                <a href="#"></a>
                            </div>
                        </div>
                    </div>
                </div>
                <a href="../../views/playlistDetail.html?id=${el.id}">
                    <p class="song_desc f-thide">
                        ${el.name}
                    </p>
                </a>
                <p class="by f-thide">by <a href="javascript:;" class="f-thide">${el.creator.nickname}</a></p>
            </li>`)
                    if (el.creator.avatarDetail !== null) {
                        let starli = $(`.classify_song li:nth-child(${index+1})`);
                        $(starli[0].children[2]).append(`<img id="star_img" src="${el.creator.avatarDetail.identityIconUrl}" alt="">`)
                    }
                })

            }
        })
    }
    if (sessionStorage.getItem('cat') == null) {
        sessionStorage.setItem('cat', '全部')
    }
    songRequest('http://localhost:3000/top/playlist', order, limit, currentData, sessionStorage.getItem('cat'))

    cateListBox_body.on('click', '.s-fc1', function () {
        sessionStorage.setItem('cat', this.innerText);
        // cat = ;
        console.log(sessionStorage.getItem('cat'));
        cateListBox.addClass('hide');
        classify_title_left_p.html(`${sessionStorage.getItem('cat')}`)
        sessionStorage.setItem('currentPage', 1);
        let pagenum = document.querySelectorAll('.pagenum')
        songRequest('http://localhost:3000/top/playlist', order, 35, currentData, sessionStorage.getItem('cat'))
        console.log(currentData);
        let pagination_prev = $('#pagination-prev');
        let pagination_next = $('#pagination-next');
        $(pagenum).eq(currentPage - 1).addClass('pagination-current').siblings().removeClass('pagination-current')
        if (currentPage == 1) {
            $(pagination_prev).addClass('pagination-disabled')
            $(pagination_next).removeClass('pagination-disabled')
        }
    })


})